<template>
        <div id = "modifyCustomerDIV">
      <el-dialog v-model="updateDialogFormVisible" title="修改客户" width="500" @close="closeUpdateHandler">
        <el-form :model="updateCustomers">
          <!-- 客户名称 -->
          <el-form-item label="客户名称" :label-width="formLabelWidth">
            <el-input disabled="true" v-model="updateCustomers.custName" autocomplete="off" />
          </el-form-item>
          <!-- 客户地址 -->
          <el-form-item label="客户地址" :label-width="formLabelWidth">
            <el-input v-model="updateCustomers.custAddress" autocomplete="off" />
          </el-form-item>
          <!-- 联系方式 -->
          <el-form-item label="联系方式" :label-width="formLabelWidth">
            <el-input v-model="updateCustomers.custMobile" autocomplete="off" />
          </el-form-item>
          <!-- 送水数量 -->
          <el-form-item label="水票余额" :label-width="formLabelWidth">
            <el-input disabled="true" v-model="updateCustomers.custTicket" autocomplete="off" />
          </el-form-item>
        </el-form>

        <template #footer>
          <div class="dialog-footer">
            <el-button @click="updateDialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="updateCustomer"> 确定 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
        
</template>
  
  
  <script>
  import { mapState } from 'vuex';
  export default {
    computed: {
      ...mapState(['user', 'token']),
    },
    data() {
      return {
        updateDialogFormVisible: true,
        updateAccount:{
            id:'',
            userName:'',
            userEmail:'',
            userMobile:''
        },
        name,
            // 修改客户表单
        updateCustomerForm: {
            id: '',
            custName: '',
            custAddress: '',
            custMobile: '',
            custTicket: '',
            account:'',
        }, 
        updateCustomers:{
            id: '',
            custName: '',
            custAddress: '',
            custMobile: '',
            custTicket: '',
        },
        // account
      };
    },
    created() {
      console.log('User from Vuex Store:', this.user['userName']);
      this.name = this.user['userName'];
        this.preUpdateCustomer();
    },
    methods: {
        preUpdateCustomer() {
        console.log(this.name);
        this.$axios
        .get(`http://localhost:8091/customer/getName?name=${this.name}`)
        .then(resp => {
            let code = resp.data.code;
            if (code === 200) {
                this.updateCustomerForm = resp.data.data;
                this.updateCustomers.id = this.updateCustomerForm.id;
                this.updateCustomers.custName = this.updateCustomerForm.custName;
                this.updateCustomers.custMobile = this.updateCustomerForm.custMobile;
                this.updateCustomers.custAddress = this.updateCustomerForm.custAddress;
                this.updateCustomers.custTicket = this.updateCustomerForm.custTicket;
                this.updateAccount = this.updateCustomerForm.account;
                console.log(this.updateAccount);
                console.log(this.updateCustomerForm);
                console.log(this.updateCustomers);

            } else {
                this.$message.error("数据回显失败");
            }
        })
        .catch(err => {
            console.log("预修改客户请求发送失败 ", err);
            this.$message.error("预修改客户请求发送失败 ", err);
        });
        this.updateDialogFormVisible = true;
      },
      updateCustomer(){
        this.$axios
        .post("http://localhost:8091/customer/update",this.updateCustomers)
        .then(resp=>{
            let code = resp.data.code;
            console.log(resp);
            // 条件成立：修改成功，重新查询客户列表
            if (code === 200) {
                this.$axios
                .post("http://localhost:8091/account/modifyPassword",this.updateAccount)
                .then(res=>{
                    let code = res.data.code;
                    if(code === 200){
                        this.$message.success("修改成功");
                    }else{
                        this.$message.error("修改客户失败");
                    }
                })
            } else {
              this.$message.error("修改客户失败");
            }
            this.updateCustomerForm = {};
            this.updateDialogFormVisible = false;
        })
        .catch(err=>{
            this.$message.error("修改客户请求发送失败：",err);
            console.log("修改客户请求发送失败：",err);
        })
      }
    }
  }
  </script>
  
  <style lang="less" scoped>

  </style>